<template>
  <div>
    <el-card class="box-card">
      <el-form :inline="true" :model="orderInfo" class="demo-form-inline" size="small">
        <el-form-item label="订单号">
          <el-input placeholder="请输入订单号" v-model="orderInfo.orderNo" clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="收货人">
          <el-input placeholder="请输入收货人" v-model="orderInfo.consignee" clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input placeholder="请输入手机号" v-model="orderInfo.phone" clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="orderInfo.orderState" placeholder="订单状态" clearable>
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围">
          <el-date-picker v-model="orderInfo.date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="orderData" border style="width: 100%" height="350px">
        <el-table-column prop="orderNo" label="订单号" width="120" fixed="left">
        </el-table-column>
        <el-table-column prop="orderTime" label="下单时间" width="150">
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="120">
        </el-table-column>
        <el-table-column prop="consignee" label="收货人" width="120">
        </el-table-column>
        <el-table-column prop="deliverAddress" label="配送地址" width="300">
        </el-table-column>
        <el-table-column prop="deliveryTime" label="送达时间" width="150">
        </el-table-column>
        <el-table-column prop="remarks" label="用户备注" width="120">
        </el-table-column>
        <el-table-column prop="orderAmount" label="订单金额" width="120">
        </el-table-column>
        <el-table-column prop="orderState" label="订单状态" width="120">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.$index, scope.row)" type="text" size="medium">编辑</el-button>
            <el-button @click="deleteRow(scope.$index, scope.row)" type="text" size="medium" style="color:#f56c6c">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[5, 10, 15, 20]" layout="total,sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>

    <!-- 弹框 -->
    <el-dialog title="订单编辑" :visible.sync="isShow">
      <el-form :model="amendOrder" label-width="100px" label-color="#fff" size="small">
        <el-form-item label="订单号">
          {{amendOrder.orderNo}}
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="amendOrder.orderState" placeholder="请选择商品分类">
            <el-option label="已受理" value="已受理"></el-option>
            <el-option label="派送中" value="派送中"></el-option>
            <el-option label="已完成" value="已完成"></el-option>
            <el-option label="未受理" value="未受理"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收货人">
          <el-input v-model="amendOrder.consignee" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="amendOrder.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="送货地址">
          <el-input v-model="amendOrder.deliverAddress" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="订单金额">
          ￥{{amendOrder.orderAmount}}
        </el-form-item>
        <el-form-item label="下单时间">
          {{amendOrder.orderTime}}
        </el-form-item>
        <el-form-item label="送达时间">
          <el-date-picker v-model="amendOrder.deliveryTime" type="datetime" format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="amendOrder.remarks"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow = false" size="medium">取 消</el-button>
        <el-button type="primary" @click="okBtn" size="medium">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList_api, editOrder_api } from "@/api/order.js";
import moment from "moment";
export default {
  data() {
    return {
      orderInfo: {
        orderNo: "",
        consignee: "",
        phone: "",
        orderState: "",
        date: "",
      },
      options: [
        {
          value: "已受理",
          label: "已受理",
        },
        {
          value: "派送中",
          label: "派送中",
        },
        {
          value: "已完成",
          label: "已完成",
        },
        {
          value: "未受理",
          label: "未受理",
        },
      ],
      orderData: [],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      amendOrder: {},
      isShow: false,
    };
  },
  methods: {
    //删除行
    deleteRow(index, row) {
      //没有接口，实现不了
      // this.$confirm("是否要将永久删除该订单？不可逆哦！", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // }).then(async () => {
      // });
    },
    //编辑行
    handleEdit(index, row) {
      this.amendOrder = { ...row };
      this.isShow = true;
    }, //点击修改商品
    async okBtn() {
      let {
        id,
        orderNo,
        orderTime,
        phone,
        consignee,
        deliverAddress,
        deliveryTime,
        remarks,
        orderAmount,
        orderState,
      } = this.amendOrder;
      console.log(this.amendOrder);
      let res = await editOrder_api({
        id,
        orderNo,
        orderTime,
        phone,
        consignee,
        deliverAddress,
        deliveryTime,
        remarks,
        orderAmount,
        orderState,
      });
      if (res.data.code === 0) {
        this.isShow = false;
        this.getList();
      }
    },
    //每页多少条改变时触发
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    //当当前页发生改变时触发
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    //获取订单列表
    async getList() {
      let params = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        orderNo: this.orderInfo.orderNo,
        consignee: this.orderInfo.consignee,
        phone: this.orderInfo.phone,
        orderState: this.orderInfo.orderState,
        date:
          this.orderInfo.date === null
            ? []
            : JSON.stringify(this.orderInfo.date),
      };
      let res = await getList_api(params);
      res.data.data.forEach((item) => {
        item.orderTime = moment(item.orderTime).format("YYYY-MM-DD HH:mm:ss");
        item.deliveryTime = moment(item.deliveryTime).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      });
      this.orderData = res.data.data;
      this.total = res.data.total;
    },
    onSubmit() {
      console.log(this.orderInfo);
      //将data清空时，element-ui会将其变为null
      this.getList();
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
}
/deep/.el-form--inline {
  .el-form-item__label {
    padding: 0 6px 0 20px;
  }
  .el-input {
    width: 150px;
  }
}

/deep/.el-pagination {
  margin: 20px 0;
}
/deep/.el-dialog__body {
  padding: 10px 20px 0;
  .el-input {
    width: 250px;
  }
  .el-textarea {
    width: 250px;
  }
  .el-input--suffix {
    width: 150px;
  }
  .el-date-editor {
    width: 200px;
  }
}
</style>